<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Porcentaje Mes DSI</title>
	<link rel="stylesheet" href="lib/jquery1.7/themes/start/jquery-ui-1.8.17.custom.css" />
	<link rel="stylesheet" href="css/demos.css" />
	<link rel="stylesheet" href="css/pagina.css" />
	<link rel="stylesheet" href="css/menuaco.css" />
	<script type="text/javascript" src="lib/jquery1.7/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="lib/jquery1.7/external/jquery.bgiframe-2.1.2.js"></script>
	<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.draggable.js"></script>
	<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.position.js"></script>	
	<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.button.js"></script>
	<script type="text/javascript" src="lib/jquery1.7/ui/jquery.effects.core.js"></script>		
	<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.tabs.js"></script>
	<script type="text/javascript" src="lib/menuaco.js"></script>
	
	<script type="text/javascript" src="lib/dtable/jquery.dataTables.js"></script>
	<script type="text/javascript">
	
	
	$(function() {
		
			//enviamos la data a un webservlet
			function Porcentaje(){
	  	  	$.ajax({	
					  url: "PorcentajeTodos",
					  data:'mes='+$("#mes").val(), 
					  type: 'post',
					  dataType: 'html',
					  success: function(data){
						  console.log(data);
						$("#TituloMes").html("Reporte Asistencia Mes: "+$('#mes option:selected').text());
						$("#dynamic").html(data);
				  	}  
					});
	  	  	}
		
			$( "button").button();
		
			
			//para generar reporte
			$("#GenerarReporte").click(
				function(){
						
					Porcentaje();
					
					
				}
			);
	
			$("#MostrarPanel").click(
					function(){
						$("#panel").show("");	
					}
				);
			
	});
	</script>
</head>
<body>
<div id="header">
		<button id="MostrarPanel">Reporte</button>
		<div id="panel" >
		<table class="center">
		<tr>
		<td><select id="mes">
		<option value="0">Enero</option>
		<option value="1">Febrero</option>
		<option value="2">Marzo</option>
		<option value="3">Abril</option>
		<option value="4">Mayo</option>
		<option value="5">Junio</option>
		<option value="6">Julio</option>
		<option value="7">Agosto</option>
		<option value="8">Septiembre</option>
		<option value="9">Octubre</option>
		<option value="10">Noviembre</option>
		<option value="11">Diciembre</option>
		</select>
		</td>
		<td>
		<button id="GenerarReporte">Generar Reporte</button>
		</td>
		</tr>
		</table>
		</div>
		
		<div id="TituloMes" style="font-size:22px;text-align:center;">
		<h2>
			
		</h2>
		</div>
		<br>
		<div id="dynamic">
		</div>
		
		
</div>		
</body>
</html>